<script setup lang="ts">
import { SearchForm, SearchTable } from '@fl/components'
import { type RequestActData  } from '@fl/api/anjutong/model/activity-management-model'
import { cloneDeep } from 'lodash-es'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import type { PlusColumn } from 'plus-pro-components'
import { useActCouponPage } from '@fl/api/anjutong/activity-management'
import { formatTime } from '@fl/utils'

const visible = defineModel<boolean>('visible', { required: true })
const scanId = defineModel<string>('id', { required: true })

// 搜索条件、分页参数
const initialState = {
    date: ['', ''],
    startTime: '',
    endTime: '',
}
const state = ref<RequestActData>(cloneDeep(initialState))

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

// 查询列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    activityId: scanId.value,
    endTime: formatTime(state.value.date?.[1], 'yyyy-MM-dd 23:59:59'),
    startTime: formatTime(state.value.date?.[0], 'yyyy-MM-dd 00:00:00'),
}))

const records = ref<any>()
const formRef = ref()
const { data, isLoading } = useActCouponPage(params)

watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
})

function cancel() {
    visible.value = false
    reset()
}

// 搜索
function submit(values: RequestActData) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}

// 重置
function reset() {
    formRef.value?.formInstance.formInstance.resetFields()
    state.value.date = []
    tablePage.value = initialPage
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const columns: PlusColumn[] = [
    {
        colProps: { span: 12 },
        fieldProps: {
            'endPlaceholder': '结束时间',
            'startPlaceholder': '开始时间',
            'type': 'daterange',
            'value-format': 'YYYY-MM-DD',
        },
        label: '使用时间',
        prop: 'date',
        valueType: 'date-picker',
    },
]

const gridOptions = reactive({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'userName', title: '用户名称' },
        { field: 'recipientMobile', title: '手机号' },
        { field: 'couponNo', title: '券号' },
        { field: 'writeOffTime', title: '使用时间' },
    ],
})
</script>

<template>
    <PlusDialog v-model="visible" :title="'数据'" :has-footer="false" width="1040" @cancel="cancel" @closed="reset">
        <SearchForm ref="formRef" v-bind="state" :columns="columns" submit-text="搜索" @reset="reset" @submit="submit" />

        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading" :data="records"
            @page-change="handlePageChange">
        </SearchTable>
    </PlusDialog>
</template>

w-full hidden_add